<template>
	<view class="contain">
		<view class="user-top">
			<img @click="gobackto(1)" src="../../static/R-C.jpg" alt="" srcset="">
			<p>欢迎使用森兰变频</p>
		</view>
		<view class="search">
			<uni-search-bar @confirm="search" @input="input"></uni-search-bar>
		</view>
		<view class="device_info">
			<view class="device_info-left">
				<view class="device_info-left-t" @click="gobackto(3)">
					<view class="device-info-left-t-l">
						<img style="padding: 20rpx;" src="../../static/add.png" alt="">
						<span style="margin:20rpx;font-size:36rpx;color: white;">添加设备</span>
					</view>
				</view>
				<view class="device_info-added">
					<span style="color: white;font-size:36rpx;line-height: 90rpx;padding: 20rpx;">已添加设备:</span>
					<view style="text-align: center;">
						<span style="font-size: 60rpx;color: white;">{{addednum}}</span>
					</view>
				</view>
			</view>
			<view class="device_info-right">
				<view class="device_info-right-t">
					<view class="devicerun-l">
						<view class="doing-icon">
							<img style="width: auto; height: auto; max-width: 100%; max-height:100%;"
								src="../.././static/doing.png" alt="">
						</view>
					</view>
					<view class="devicerun-r">
						<view class="status-info">
							<span>正常运行</span>
							<span style="font-size: 50rpx;padding: 40rpx;">{{runningnum}}</span>
						</view>
					</view>
				</view>
				<view class="device_info-right-b">
					<view class="devicerun-l">
						<view class="warning-icon">
							<img style="width: auto; height: auto; max-width: 100%; max-height:100%;"
								src="../.././static/warning.png" alt="">
						</view>
					</view>
					<view class="devicerun-r">
						<view class="status-info">
							<span>故障设备</span>
							<span style="font-size: 50rpx;padding: 40rpx;">{{warningnum}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="device_list">
			<view class="device-title">
				<h3>设备列表</h3>
			</view>
			<view class="type">
				<button>全部</button>
				<button>高压</button>
				<button>中低压</button>
			</view>
			<view v-for="(item,index) in devices" :key="index" @click="gobackto(2)" class="devicecard">
				<view class="devicecard-top">
					<span
						style="width: 50%;height: 38px; line-height: 38px;margin-left: 20rpx;">{{devices[index].deviceName}}</span>
					<view style="display: flex;padding: 18rpx;">
						<view style="width: 40rpx;height: 40rpx;background-color: greenyellow;border-radius: 20rpx;">
						</view>
						<view style="margin-left: 10rpx;text-align: center;">
							设备状态：{{status}}
						</view>
					</view>
				</view>
				<view class="devicecard-foot" style="font-size:28rpx;">
					<li>设备激活时间:{{devices[index].activeTime}}</li>
					<li>设备安装位置:{{devices[index].deviceAddress}}</li>
					<li>设备最近上线时间:{{devices[index].lastOnlineTime}}</li>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	import unisearchbarbox from "@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue"
	export default {
		data() {
			return {
				runningnum: '9',
				warningnum: '0',
				addednum: '',
				status: '正常',
				devices: []
			}
		},
		component() {
			// uni-search-bar
			unisearchbarbox
		},
		created() {
			uni.request({
				url: 'http://192.168.100.75:9090/sl-device/query/1', // 请求的URL  
				method: 'GET', // 请求方法，例如 GET, POST  
				headers: {
					'Content-Type': 'application/json',
					'Access-Control-Allow-Origin': '*' //允许所有域访问
				},
				data: {

				}, // 请求参数 
				success: (res) => { // 使用箭头函数以保持正确的 this 上下文
					console.log(res.data);
					this.devices = res.data.data; // 此处的 this 将指向组件实例
					this.addednum = res.data.data.length;
				},
				fail: (error) => { // 同样使用箭头函数
					console.error(error);
				}
			});
		},

		methods: {
			gobackto(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/list/user'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/list/devices'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages/list/adddevice'
					})
				}
			}

		},

	}
</script>

<style>
	.user-top {
		width: 96%;
		margin-left: 2%;
		margin-top: 2%;
		display: flex;
	}

	img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 28rpx;
	}

	p {
		font-size: 14px;
		margin-top: 60rpx;
		margin-left: 20rpx;
	}

	.device_info {
		display: flex;
		width: 96%;
		margin-left: 2%;
	}

	.device_info-left {
		width: 49%;
		background-color: #1976D2;
		border-radius: 20rpx;
	}

	.device-info-left-t {
		width: auto;
		height: 50%;
		background-color: red;
		display: flex;
	}

	.device_info-added {
		width: auto;
		height: 180rpx;
		background-color: #64B5F6;
		border-radius: 20rpx;
	}

	.device-info-left-t-l {
		width: 100%;
		height: 182rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.device_info-right {
		width: 47%;
		height: 360rpx;
		margin-left: 4%;

	}

	.device_info-right-t {
		width: auto;
		height: 46%;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
	}

	.devicerun-l {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.doing-icon {
		width: 60%;
		height: 66%;
		background-color: #F0FFF0;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.warning-icon {
		width: 60%;
		height: 66%;
		background-color: #FFD700;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.devicerun-r {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.status-info {
		margin-top: 8%;
	}

	.device_info-right-b {
		width: auto;
		height: 46%;
		background-color: #ffffff;
		margin-top: 8%;
		border-radius: 20rpx;
		display: flex;
	}

	.device_list {
		margin: 3% 2%;
	}

	.type {
		margin-top: 2%;
		display: flex;
		width: 80%;
	}

	button {
		width: 25%;
		height: 60rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		line-height: 56rpx;
		border: 0.5rpx solid rgba(0, 0, 0, 0.4);
	}

	.devicecard {
		width: 100%;
		height: 300rpx;
		background-color: white;
		margin-top: 2%;
		margin-bottom: 4%;
		border-radius: 20rpx;
		box-shadow: 0rpx 10rpx 5rpx #E3F2FD;
	}

	.devicecard-top {
		width: 100%;
		height: 25%;
		background-color: #64B5F6;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
	}
</style>